Como utilizar Flexbox para gestionar la distribución de los elementos de una página web
Para que un elemento organice su contenido usando flexbox primero definimos la propiedad display como flex:
display: flex;
Flexbox nos permite mostrar los elementos de dos maneras, por filas o por columnas, para eso usamos flex-direction:
flex-direction: row;
De esta manera todos los elementos se mostraran en una misma fila y flexbox distribuirá los elementos de manera equitativa entre ellos
Si usamos el atributo flex-wrap con el valor wrap los elementos que no quepan en la fila se pasan a la siguiente fila:
flex-wrap: wrap;
Podemos usar flex-grow si queremos que un elemento ocupe mas que otro, (flexbox solo le asignará mas espacio al elemento si hay espacio disponible), el valor por defecto de todos los elementos es 0, flex asignará mas espacio a los que tengan mas valor de manera equitativa
flex-grow: 3;
Si queremos que se distribulla el espacio de manera equitativa entre los elementos podemos usar:
justify-content: space-around;
Si queremos que se repartan todo el espacio de izquierda a derecha podemos usar:
justify-content: space-between;
Tambien podemos alinear los elementos verticalmente usando:
align-items:flex-start;
align-items:flex-end;
align-items:center;
HTML | Flexbox | Layout | CSS